{% extends "award_base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "蓝鲸开发框架" %}</title>
{{ block.super }}
    <style>
        .bk-mark-show {
            padding-left: 10px;
        }
    </style>
{% endblock %}

{% block content %}
<div class="page-content" style="min-width:80%;">
    {#    <div class="bk-collapse-panel">#}
    {#        <div class="panel-header" role="tab">#}
    {#            <a role="button" data-toggle="collapse" href="#panel-content1" class="panel-icon panel-spread"></a>#}
    {#            <h3 data-toggle="collapse" href="#panel-content1" class="panel-title">当前可申报奖项</h3>#}
    {#        </div>#}
    {#        <div id="panel-content1" class="panel-body panel-collapse collapse in p0">#}
    {#            <div class="m15">#}
    {#                <p>内容...</p>#}
    {#                <p>内容...</p>#}
    {#                <p>内容...</p>#}
    {#                <p>内容...</p>#}
    {#            </div>#}
    {#        </div>#}
    {#    </div>#}
    <div class="bk-collapse-panel">
        <div class="panel-header" role="tab">
            <a role="button" data-toggle="collapse" href="#panel-content1" class="panel-icon panel-spread"></a>
            <h3 data-toggle="collapse" href="#panel-content1" class="panel-title">当前可申报奖项</h3>
        </div>
        <div id="panel-content1" class="panel-body panel-collapse collapse in p0">
            <div class="m15">
                <div class="row">
                    {% for award in award_data %}
                        <div class="col-lg-2">
                            <div class="bk-mark-show" style="height: 100px">
                                <p class="p_class" style="padding-top: 10px"><b>所属组织:</b> {{ award.org_name }}</p>
                                <p class="p_class"><b>奖项名称:</b> {{ award.award_name }}</p>
                                <p class="p_class"><b>提报⼈数:</b> {{ award.apply_person_num }}⼈</p>
                                <div class="bk-mark-corner bk-success">
                                    <p>获奖{{ award.award_person_num }}</p>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>


    <div class="bk-collapse-panel">
        <div class="panel-header" role="tab">
            <a role="button" data-toggle="collapse" href="#panel-content2" class="panel-icon panel-spread"
                aria-expanded="true"></a>
            <h3 role="button" data-toggle="collapse" href="#panel-content2" class="panel-title" aria-expanded="true">
                上次获奖人名单</h3>
        </div>
        <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true" style="">
            <table class="bk-table bk-table-header-bordered ">
                <thead>
                    <tr>
                        <th>所属单位</th>
                        <th>申报奖项</th>
                        <th>申请时间</th>
                        <th>申报人/团队</th>
                        <th>申报详情</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>蓝鲸产品中心</td>
                        <td>业务优化奖</td>
                        <td>2017-11-10</td>
                        <td>极品飞车车online容器项目联合团队</td>
                        <td><a class="bk-text-button bk-info" title="查看">查看</a></td>
                    </tr>
                    <tr>
                        <td>蓝鲸产品中心</td>
                        <td>业务优化奖</td>
                        <td>2017-11-10</td>
                        <td>极品飞车车online容器项目联合团队</td>
                        <td><a class="bk-text-button bk-info" title="查看">查看</a></td>
                    </tr>
                    <tr>
                        <td>蓝鲸产品中心</td>
                        <td>业务优化奖</td>
                        <td>2017-11-10</td>
                        <td>极品飞车车online容器项目联合团队</td>
                        <td><a class="bk-text-button bk-info" title="查看">查看</a></td>
                    </tr>
                    <tr>
                        <td>蓝鲸产品中心</td>
                        <td>业务优化奖</td>
                        <td>2017-11-10</td>
                        <td>极品飞车车online容器项目联合团队</td>
                        <td><a class="bk-text-button bk-info" title="查看">查看</a></td>
                    </tr>
                    <tr>
                        <td>蓝鲸产品中心</td>
                        <td>业务优化奖</td>
                        <td>2017-11-10</td>
                        <td>极品飞车车online容器项目联合团队</td>
                        <td><a class="bk-text-button bk-info" title="查看">查看</a></td>
                    </tr>
                    <tr>
                        <td>蓝鲸产品中心</td>
                        <td>业务优化奖</td>
                        <td>2017-11-10</td>
                        <td>极品飞车车online容器项目联合团队</td>
                        <td><a class="bk-text-button bk-info" title="查看">查看</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


    <div class="modal fade" id="displayEditApplyModal" tabindex="1"
         role="dialog"
         aria-labelledby="displayEditApplyModalLabel"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="displayEditApplyModalLabel">奖项查看</h4>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="bk-form" style="padding: 10px">
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">奖项名称：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p id="display_edit_display_award_name" class="p_class"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">评奖条件：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_requirement"
                                       style="word-break: break-word">
                                    </p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label"
                                       style="width:150px;">奖项级别：</label>
                                <div class="bk-form-content"
                                     style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_award_level"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">所属组织：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_belonging_org"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">开始时间：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_start_datetime"
                                       name="display_start_datetime">
                                    </p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">结束时间：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_end_datetime"
                                       name="edit_display_end_datetime">
                                    </p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">是否需要附件：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_need_attachment"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">奖项状态：</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_display_status"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <form id="validate_edit_form">
                            <div class="bk-form" style="padding: 10px 28px 10px 0">
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">申报⼈/团队</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="display_edit_applicant_info"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">事迹介绍</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="display_edit_introduction"
                                           style="word-break: break-word"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">附件</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <a href="" target="_blank" id="display_edit_attachment_url">
                                            <span class="bk-tag is-fill bk-primary">点击查看附件</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">评审结果</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="display_state"></p>
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:150px;">评语</label>
                                    <div class="bk-form-content" style="margin-left:150px;">
                                        <p class="p_class" id="display_comment"></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default"
                            data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

{% endblock %}

{% block extra_block %}
    <script>
        var language = {
            search: "{% trans '搜索：' %}",
            lengthMenu: "{% trans '每⻚显示 _MENU_ 记录' %}",
            zeroRecords: "{% trans '没找到相应的数据！' %}",
            info: "{% trans '分⻚ _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
            infoEmpty: "{% trans '暂⽆数据！' %}",
            infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
            paginate: {
                first: "{% trans '⾸⻚' %}",
                last: "{% trans '尾⻚' %}",
                previous: "{% trans '上⼀⻚' %}",
                next: "{% trans '下⼀⻚' %}",
            }
        };

        var getAwardTable = $('#awardedTable').DataTable({
            sProcessing: '<img alt="loadding"src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',
            //这⾥很重要，如果你的加载中是⽂字，则直接写上⽂字即可，如果是gif的图⽚，使⽤img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分⻚
            ordering: false, //关闭排序
            info: true, //隐藏左下⻆分⻚信息
            searching: false, //关闭搜索
            pageLength: 10, //每⻚显示⼏条数据
            lengthChange: false, //不允许⽤户改变表格每⻚显示的记录数
            language: language, //汉化
            serverSide: true,
            lengthMenu: [5, 10, 25, 50, 75, 100],
            ajax: {
                url: '{{SITE_URL}}get_awarded_list/',
                method: "get",
                dataType: 'json',
                dataSrc: function (json) {
                    json.draw = json.data.info.draw;
                    json.recordsTotal = json.data.info.recordsTotal;
                    json.recordsFiltered =
                        json.data.info.recordsFiltered;
                    json.data = json.data.info.data;
                    return json.data;
                },
            },
            columnDefs: [
                {
                    targets: 0,
                    data: "belonging_org",
                },
                {
                    targets: 1,
                    data: "award_name",
                },
                {
                    targets: 2,
                    data: "apply_time",
                },
                {
                    targets: 3,
                    data: "applicant_info",
                },
                {
                    targets: 4,
                    data: "apply_id",
                    render: function (data, type, row, meta) {
                        return '<a class="bk-icon-button bk-success bkbutton-mini" type="button" onclick="displayAwardApplyModal('
                            + row.award_id + ',' + data
                            + ')" data-toggle="modal" datatarget="#displayEditApplyModal" title="查看">\n'
                            + '<i class="bk-icon icon-search bk-icon"> </i>\n'
                            + '<i class="bk-text">查看</i>\n' + '</a>';
                    }
                },
            ]
        });

        setInterval(function () {
            getAwardTable.ajax.reload(null, false); // user paging is not reset on reload
        }, 30000);

        function displayAwardApplyModal(award_id, apply_id) {
            $.ajax({
                url: '{{ SITE_URL }}get_display_award_apply_info/' + award_id + '/' + apply_id,
                method: 'get',
                success: function (response) {
                    if (response['result']) {

                        $("#display_edit_display_award_name").html(response.data.info.data.award_name);

                        $("#display_edit_display_requirement").html(response.data.info.data.requirement);

                        $("#display_edit_display_award_level").html(response.data.info.data.award_level);

                        $("#display_edit_display_belonging_org").html(response.data.info.data.belonging_org);

                        $("#display_edit_display_start_datetime").html(response.data.info.data.start_time);

                        $("#display_edit_display_end_datetime").html(response.data.info.data.end_time);

                        $("#display_edit_display_need_attachment").html(response.data.info.data.need_attachment);

                        $("#display_edit_display_status").html(response.data.info.data.status);

                        $("#display_edit_applicant_info").html(response.data.info.data.applicant_info);

                        $("#display_edit_introduction").html(response.data.info.data.introduction);

                        $("#display_edit_attachment_url").attr('href', "{{ SITE_URL }}" + response.data.info.data.attachment_url);

                        $("#display_comment").html(response.data.info.data.comment);

                        $("#display_state").html(response.data.info.data.state);
                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                    }
                }
            })
        }
    </script>

{% endblock %}